<template>
<div class="recommend">
    <div class="recommend-item" v-for="item in recommends.slice(1,5)" :key="item.id">
     <!--    slice():读取数组的一部分，并返回一个新的数组 
            slice() 方法可从已有的数组中返回选定的元素。
            slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
        注意： slice() 方法不会改变原始数组。
    -->
    <a href="" @click.prevent="goD(item.id)">
        <!-- @click.prevent函数会阻止触发dom的原始事件，而去执行特定的事件 -->
        <!-- <img :src="item.cover_url" alt=""> -->
        <img v-lazy="item.cover_url" alt="">
        <div>{{ item.title }}</div>
    </a>

    </div>
   
</div>
</template>
<script>
import { useRouter } from 'vue-router';
// router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，
//这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
export default{
    name:"RecommendView",
    props:{
        // props:父类向子类传递数据
        recommends:{
            type:Array,
            default(){
                return []
            }
        }
    },
    setup(){
        const router = useRouter();
        const goD=(id)=>{
            router.push({path:'/detail',query:{id}})
        }
        return{
            goD
        }
    }
}
</script>
<style>
.recommend{
    display: flex;
    width:100%;
    text-align: center;
    padding: 15px 0 30px;
    border-bottom: 8px solid #EEE;
    font-size: 12px;

}
.recommend-item{
    flex: 1;
}
.recommend-item img{
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
}
</style>